<template>
  <el-form
    ref="form"
    :model="form"
    :label-position="labelposition"
    size="small"
    class="filterform groupfrom"
    label-width="110px"
  >
    <el-form-item label="关键词：" class="mb-10">
      <el-select
        v-model="form.grouptype"
        placeholder=""
        class="mr-8"
        style="width: 126px"
      >
        <el-option label="含任意关键词" :value="1"></el-option>
        <el-option label="含所有关键词" :value="2"></el-option>
      </el-select>
      <el-input
        placeholder="可输入多个，按Enter确认"
        v-model="form.name"
        :style="{width: `calc(100% - 136px)`}"
        @keyup.enter.native="handleAddLable"
      >
        <el-button
          slot="append"
          icon="el-icon-plus"
          @click="handleAddLable"
        ></el-button>
      </el-input>
    </el-form-item>
    <div v-if="form.labels.length" class="labelbox mt-5">
      <div
        class="labelitem c_text ml-5 mb-5"
        v-for="(item, index) in form.labels"
        :key="index"
      >
        {{ item }}
        <i class="el-icon-close commhover" @click="removeLable(index)"></i>
      </div>
    </div>
    <el-form-item label="群标签：" class="mb-10">
      <el-select
        v-model="form.labeltype"
        placeholder=""
        class="mr-8"
        style="width: 126px"
      >
        <el-option
          v-for="(item, index) in lableList"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="form.grouplabel"
        placeholder="群标签"
        clearable
        :style="{width: `calc(100% - 136px)`}"
      >
        <el-option label="含任意关键词" :value="1"></el-option>
        <el-option label="含所有关键词" :value="2"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="是否群主/管理：" class="mb-10">
      <el-select
        v-model="form.groupmaster"
        placeholder="请选择"
        class="w_full"
      >
        <el-option
          v-for="item in groupmasterList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="群成员数：" class="mb-10">
      <div class="flex">
      <el-form-item prop="number1" class="mb-0">
        <el-input
          v-model="form.number1"
          clearable
          placeholder=""
          type="number"
          style="width: 90px"
          @blur="handleBlurNumber('no', 500)"
        ></el-input>
      </el-form-item>
      <div class="line">—</div>
      <el-form-item prop="number2" class="mb-0">
        <el-input
          v-model="form.number2"
          clearable
          placeholder=""
          type="number"
          style="width: 90px"
          class="mr-10"
          @blur="handleBlurNumber('no', 500)"
        ></el-input>
      </el-form-item>
      </div>
    </el-form-item>
    <el-form-item label="建群时间：" prop="times" class="mb-10">
      <el-date-picker
        v-model="form.times"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        class="w_full"
      ></el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      lableList: [
        { label: "含任意标签", value: 1 },
        { label: "含所有标签", value: 2 },
        { label: "未打任何标签", value: 3 },
      ],
      groupmasterList: [
        { label: "群主/群管理员", value: 1 },
        { label: "群主", value: 2 },
        { label: "群成员", value: 3 },
      ],
      form: {
        grouptype: 1,
        name: "",
        labels: [],
        labeltype: 1,
        grouplabel: "",
        min: "",
        max: "",
      },
      visible: false,
      numberstr: "",
    };
  },
  props: {
    labelposition: {
      default: "top",
    },
  },
  methods: {
    submitNum() {
      this.numberstr = this.form.min + " ~ " + this.form.max;
      console.log("this.numberstr:", this.numberstr);
      this.visible = false;
    },

    handleAddLable() {
      if (this.form.name) {
        if (this.form.labels.includes(this.form.name)) {
          this.$message.warning("标签重复");
          return;
        }
        this.form.labels.push(this.form.name);
        this.form.name = "";
      }
    },

    removeLable(index) {
      this.form.labels.splice(index, 1);
    },

    handleBlurNumber(type, maxnumber) {
      // 使用正则表达式匹配正整数
      const regex = /^[1-9]\d*$/;
      // 如果输入的值不是正整数，则将其设置为上一个有效值
      if (!regex.test(this.form[type])) {
        this.form.min = maxnumber;
      } else {
        if (this.form[type] > 500) {
          this.form[type] = maxnumber;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.linebox {
  width: 36px;
}
.el-form {
  ::v-deep .el-form-item__label {
    color: rgba($color: #000000, $alpha: 0.65);
    padding: 0 !important;
  }
}
.labelitem {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  background-color: #fafafa;
  padding: 2px 7px;
  line-height: 22px;
}
.line{
  height: 32px;
  margin: 0px 10px;
}
</style>